<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" import="java.util.*"%>
<%@ page import="com.itr.kbm.model.SessionDataObject"%>

<%
	if (session.getAttribute("logindata") == null) {
		response.sendRedirect(request.getContextPath() + "/billing");
%>
<br />
<h4>
	You are not logged in !! Go to <a class=""
		href="${pageContext.request.contextPath}/billing/"> Register Page
	</a>
</h4>
<br />
<%
	} else {
		SessionDataObject object = (SessionDataObject) session
				.getAttribute("logindata");
%>
<div class="col-md-9">
	<%
		if (object.getTypeUser().equals("koptelProduct")) {
	%>
	<div class="row">
		<form role="form" name="summary-form" id="summary-form"
			action="${pageContext.request.contextPath }/request-logout">
			<div class="form-group">
				<div class="col-md-9">
					<br />
					<h4>
						Hi,
						<%=object.getKodeKopeg()%>
						<%=object.getKodeKoptelProduct()%>
						!! ~ Welcome to Billing Management ~
					</h4>
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-3">
					<input type="submit" id="show-report-button" name="submit"
						value="Log Out" class="form-control btn btn-default" />
				</div>
			</div>
		</form>
		<br /> <br />
		<h2>KOPTEL PRODUCT</h2>
	</div>
	<div class="row form-row">
		<form id="upload-form" name="upload-form"
			action="${pageContext.request.contextPath }/request-upload_koptel_product"
			role="form" method="post" enctype="multipart/form-data">
			<div class="form-group">
				<div class="col-md-9">
					<br /> <input type="file" name="report-file" class="form-control">
				</div>
			</div>
			<div class="form-group">
				<div class="col-md-3">
					<input id="submit-upload-form" class="form-control btn btn-default" name="submit"
						type="submit" value="Upload" />
					<!-- AJAX FORM SUBMIT -->
				</div>
			</div>
		</form>
	</div>
	<c:if test="${icon.equals('fail')}">

		<h5 style="color: red; border-style: solid;">
			<img
				src="${pageContext.request.contextPath}/assets/img/icon/fail.png"
				width="40px">${alert }
		</h5>

		<c:if test="${!empty listKoptelProduct }">
			<div class="row table-row">
				<table class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th rowspan="2">#</th>
							<th rowspan="2">NIK</th>
							<th rowspan="2">NAMA</th>
							<th rowspan="2">JUMLAH</th>
							<th rowspan="2">BEGDA</th>
							<th rowspan="2">ENDA</th>
							<th rowspan="2">KETERANGAN</th>
						</tr>
					</thead>
					<tbody>

						<c:forEach items="${listKoptelProduct }" var="product"
							varStatus="i">
							<c:if test="${product.validate.equals('false') }">
								<tr class="${product.validate }">
									<td>${i.count }</td>
									<td>${product.nik }</td>
									<td>${product.nama }</td>
									<td>${product.jumlah }</td>
									<td>${product.begda }</td>
									<td>${product.enda }</td>
									<td>${product.keterangan }</td>
								</tr>
							</c:if>
						</c:forEach>

					</tbody>
				</table>
			</div>

		</c:if>
	</c:if>
	<c:if test="${icon.equals('success')}">

		<h5 style="color: green; border-style: solid;">
			<img
				src="${pageContext.request.contextPath}/assets/img/icon/success.png"
				width="40px">${alert }
		</h5>
		<br />
		<c:if test="${!empty listEmp }">

			<h5 style="color: red;">WARNING !!</h5>
			<div class="row table-row">
				<table class="table table-striped table-bordered table-condensed">
					<thead>
						<tr>
							<th rowspan="2">#</th>
							<th rowspan="2">NIK</th>
							<th rowspan="2">NAMA</th>
							<th colspan="2">TGL PENSIUN</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${listEmp }" var="emp" varStatus="i">
							<tr>
								<td>${i.count }</td>
								<td>${emp.nik }</td>
								<td>${emp.nama }</td>
								<td>${emp.tglPensiunNorm }</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>

		</c:if>
	</c:if>

	<%
		}
	%>
	<br />
</div>
<%
	}
%>

<script type="text/javascript">
	jQuery(function($) {
		var items = $('.searchable tr');

		var numItems = items.length;
		var perPage = 10;

		items.slice(perPage).hide();

		$(".pagination-page").pagination({
			items : numItems,
			itemsOnPage : perPage,
			cssStyle : "light-theme",
			onPageClick : function(pageNumber) {
				var showFrom = perPage * (pageNumber - 1);
				var showTo = showFrom + perPage;

				items.hide().slice(showFrom, showTo).show();
			}
		});
	});


	$("form[name=upload-form]").submit(function() {
		showLoadingScreen();
		setTimeout(showTable, 600000);
		return true;
	});
	
	$(document)
			.ready(
					function() {
						$('#filter').keyup(function() {

							var rex = new RegExp($(this).val(), 'i');
							$('.searchable tr').hide();
							$('.searchable tr').filter(function() {
								return rex.test($(this).text());
							}).show();

						});
					});

	function showTable() {
		//$(".table-row").show();
		hideLoadingScreen();
	}
</script>
<style type="text/css">
h2 {
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	font-size: 16px;
	margin: 0px;
	background-color: #27ae60;
	color: #fff;
}

input[type=file].form-control {
	height: auto;
}

.form-row {
	background-color: #f3f3f3;
	padding-bottom: 15px;
}

.table-row {
	padding: 15px 0;
	font-size: 12px;
}

.table-row table th {
	text-align: center;
	vertical-align: middle !important;
}

.false td {
	background-color: #ff5e63 !important;
	color: #fff;
}

.form-control {
	padding: 3px;
}
</style>